<template>
	<view class="app app-bg">
		<view class="info" v-if="status === 0">
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/icon_in.png"
				class="icon"
			></image>
			<text>提现审核中</text>
		</view>
		<view class="info" v-if="status === 1">
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/icon_success.png"
				class="icon"
			></image>
			<text>提现成功</text>
		</view>
		<view class="info" v-if="status === -1">
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/icon_fail.png"
				class="icon"
			></image>
			<text>提现失败</text>
		</view>
		<view class="line"></view>
		<view class="main">
			<view class="money">￥{{ vk.pubfn.priceFilter(info.real_money) }}</view>
			<view class="text">提现金额</view>
			<view class="v account">{{ type }}</view>
			<view class="v time">
				{{ vk.pubfn.timeFormat(info._add_time, "yyyy-MM-dd hh:mm") }}
			</view>
			<view class="v fee">￥{{ vk.pubfn.priceFilter(info.fee) }}</view>
			<view class="v fail" v-if="status === -1">
				<text style="flex: 1">{{ info.content }}</text>
			</view>
			<view class="v succ" v-if="status === 1">
				<image class="icon" mode="aspectFill" :src="info.image" @tap="viewImage"></image>
			</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk

export default {
	data() {
		return {
			wid: "",
			info: {},
			status: 0
		}
	},
	onLoad(opt) {
		this.wid = opt.id
		this.init()
	},
	computed: {
		type() {
			if (!this.info.remark) return ""
			if (this.info.remark.type === 0) return "支付宝账号"
			if (this.info.remark.type === 1) return "银行卡账号"
			return "微信账号"
		}
	},
	methods: {
		// 初始化
		init() {
			vk.callFunction({
				url: "client/salesman.queryWithdrawalDetail",
				title: "获取中...",
				data: { wid: this.wid }
			}).then(res => {
				this.info = res.info
				this.status = res.status
			})
		},
		// 查看图片
		viewImage() {
			uni.previewImage({ urls: [this.info.image] })
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/nav_bg.png")
		#f5f5f5 no-repeat;
	background-size: 100% 430rpx;
}

.info {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #ffffff;
	padding: 64rpx 0;
	font-size: 30rpx;
	.icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 18rpx;
	}
}

.line {
	margin: 0 30rpx;
	height: 32rpx;
	background-color: #1d9a2d;
	position: relative;
	z-index: 1;
	border-radius: 16rpx;
}

.main {
	background-color: #ffffff;
	margin: -16rpx 54rpx 0;
	padding: 32rpx 30rpx;
	border-radius: 0 0 10rpx 10rpx;
	position: relative;
	z-index: 2;
	border-top: 4rpx solid #005a0c;
	min-height: 700rpx;
	.money {
		display: block;
		font-size: 44rpx;
		font-weight: bold;
		text-align: center;
		line-height: 63rpx;
	}
	.text {
		display: block;
		color: #999999;
		text-align: center;
		margin-bottom: 62rpx;
	}
	.v {
		padding-bottom: 26rpx;
		display: flex;
	}
	.account::before {
		content: "提现账户：";
		color: #999999;
		width: 146rpx;
	}
	.time::before {
		content: "提现时间：";
		color: #999999;
		width: 146rpx;
	}
	.fee::before {
		content: "手续费用：";
		color: #999999;
		width: 140rpx;
	}
	.fail::before {
		content: "失败原因：";
		color: #999999;
		width: 146rpx;
	}
	.succ::before {
		content: "提现凭证：";
		color: #999999;
		width: 146rpx;
	}
	.succ .icon {
		width: 159rpx;
		height: 159rpx;
		border-radius: 10rpx;
	}
}
</style>
